{% extends "todolist/base.html" %}

{% load static %}

{% block css %}{% static 'todolist/css/home.css' %}{% endblock css %}

{% block title %}ToDo List{% endblock title %}

{% block homeActive %}active{% endblock homeActive %}

{% block mainContent %}

{% if  Warn %}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <b>错误</b>：{{ Warn }}
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
{% endif %}

<div class="table-responsive">
    <table id="todoTable" class="table table-hover">
        <colgroup>
            <col style="width:50px">
            <col>
            <col style="width:70px">
            <col style="width:70px">
        </colgroup>
        <thead class="thread-light">
            <tr>
                <th></th>
                <th>ToDo</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody class="no-underline">
            {% for todo in ToDoList %}
            {% if todo.isDone %}
            <tr class="table-dark" >
                <td></td>
                <td class="text-dark" id="line-through" style="top:50%" onclick="postId({{todo.id}})">{{todo.todo}}</td>
                <td></td>
                <td align="center" class="less-padding">
                    <button class="btn btn-default btn-circle bg-danger" data-toggle="modal" data-target="#delModal"
                        data-id="{{todo.id}}" data-content="{{todo.todo}}">
                        <i class="fa fa-trash-o" aria-hidden="true"></i>
                    </button>
                </td>
            </tr>
            {% else %}
            <tr >
                <td></td>
                <td onclick="postId({{todo.id}})">{{todo.todo}}</td>
                <td class="less-padding">
                    <button class="btn btn-default btn-circle bg-success" data-toggle="modal" data-target="#editModal"
                        data-id="{{todo.id}}" data-content="{{todo.todo}}">
                        <i class="fa fa-pencil" aria-hidden="true"></i>
                    </button></td>
                <td align="center" class="less-padding">
                    <button class="btn btn-default btn-circle bg-danger" data-toggle="modal" data-target="#delModal"
                        data-id="{{todo.id}}" data-content="{{todo.todo}}">
                        <i class="fa fa-trash-o" aria-hidden="true"></i>
                    </button>
                </td>
            </tr>
            {% endif %}

            {% endfor %}
        </tbody>
    </table>
</div>

<!-- 新建ToDo模态框 -->
<div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新建ToDo事项</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="">
                {% csrf_token %}
                <div class="modal-body">
                    <input name="Method" type="hidden" value="Add">
                    <div class="container-fluid">
                        <input name="NewToDo" type="text" class="form-control" id="newText">
                        <small id="help" class="form-text text-muted">在这里编辑ToDo事项</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">添加</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 修改ToDo模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改ToDo事项</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="">
                {% csrf_token %}
                <div class="modal-body">
                    <input id='editId' name="EditId" type="hidden">
                    <input name="Method" type="hidden" value="Edit">
                    <div class="container-fluid">
                        <input type="text" class="form-control" id="editText" name="EditText">
                        <small id="help" class="form-text text-muted">在这里编辑ToDo事项</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">修改</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 删除ToDo模态框-->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">删除ToDo事项</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="">
                {% csrf_token %}
                <div class="modal-body">
                    <input id='delId' name="DelId" type="hidden">
                    <input name="Method" type="hidden" value="Del">
                    <div class="container-fluid">
                        你确定要删除“<b id="delContent"></b>”？
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">删除</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock mainContent %}

{% block otherContent %}
<!-- 右下角的悬浮按钮-->
<button type="button" class="btn btn-default btn-circle-lg bg-dark float-button" style="color:lightgray"
    data-toggle="modal" data-target="#newModal">
    <i class="fa fa-plus" aria-hidden="true"></i>
</button>

{% endblock otherContent %}

{% block scriptContent %}
<script type='text/javascript'>
    // 模态框传参用脚本
    $('#editModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var id = button.data('id') // Extract info from data-* attributes
        var content = button.data('content')
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('#editText').val(content)
        modal.find('#editId').val(id)
    })

    $('#delModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var id = button.data('id') // Extract info from data-* attributes
        var content = button.data('content')
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('#delContent').text(content)
        modal.find('#delId').val(id)
    })

    //表格点击行事件，切换已完成和未完成
    postId = function (id) {
        $.ajax({
            url: '',
            method: 'post',
            data: { Method: "Change", ChangeId: id },
            headers: { "X-CSRFToken": $.cookie("csrftoken") }
        })
        window.location.href=window.location.href
        window.location.reload
    }
</script>
{% endblock scriptContent %}